<script setup>
import { ref } from 'vue';
import axios from 'axios';
const banner_img = ref('');

const url = web_url + '/api/banner.index?name=home_banner';
axios.get(url).then((res) => {

    banner_img.value = res.data.image_list[0].image;
    console.log(banner_img.value)
}); 

const banner_txt_name = ref('');
const banner_txt_content = ref('');
function findArticleByTitle( title ){


    const banner_txt_url = web_url + '/api/cms.article.single_by_title/' + title;
    axios.get( banner_txt_url ).then( ( res ) => {

        banner_txt_content.value = res.data.article.content;
        res.data.article.custom.forEach(element => {
            if( element.key == 'name'){
                banner_txt_name.value = element.value;
            }
        });
       

        // console.log(banner_txt_content.value)

    });


}
findArticleByTitle( 'banner_text' );

</script>
<template>
    <div class="hero-video banner--has-bg lazy banner--supports-block entered" data-lazy-function="loadBgImage"
        data-bg-img="" data-bg-img-mobile="https://static.komaspec.com/media/c4ufzpzg/komaspec-mobile-background2-2x.jpg"
        data-ll-status="entered">
        <div class="videobg entered" data-ll-status="entered">
            <!-- <video class="lazy entered loaded" data-lazy-function="loadVideo" autoplay="" muted="" loop="" playsinline="" data-ll-status="loaded">
                  <source data-video="https://static.komaspec.com/media/jr2hdukz/komaspec-corporate-video-background.mp4" type="video/mp4" src="https://static.komaspec.com/media/jr2hdukz/komaspec-corporate-video-background.mp4">
              </video> -->
            <img :src="banner_img" alt="">
            <!-- <img :src="banner_img" style="height: auto;width: 100%;" alt=""> -->
        </div>
        <div class="container hero-video__container">
            <div class="hero-video__control">
                <div class="hero-video__content padding--l position--center">
                    <div class="col-7">
                        <span class="hero-video__pre-heading" style="font-family: arial;font-size: 2rem;">
                            
                            {{ banner_txt_name }}
                        </span>
                    
                        <div class="banner-text" v-html="banner_txt_content"></div>
                        
                        <!--
                        <p class="hero-video__text">
                            We are an equipment company specializing in Livestock Machinery，
                        </p><p class="hero-video__text">
                            The company was established in 2012,
                        </p><p class="hero-video__text"> 
                            and its business covers everything from manufacturing to installation and after-sales service.
                        </p><p class="hero-video__text">
                            The factory is located in Jiaozhou, Qingdao, Shandong Province. The total area is 4,000 ㎡.
                        </p><p class="hero-video__text">
                            There is a 150㎡ office in Chengyang District, Qingdao City, 
                        </p><p class="hero-video__text">
                            and a trading company in Osaka, Japan.
                        </p>
                        -->
                        <!--
                        <h1 class="hero-video__heading">机电、钣金和塑料组件的合约制造商</h1>
                        -->
                        <!--
                        <p class="hero-video__text">
                            通过端到端的制造解决方案，直接从我们位于中国、越南和墨西哥的工厂进行产品原型设计、试制、批量生产和装运。
                        </p>
                        <ul class="hero-video__items">
                            <li class="hero-video__item">工程与设计支持</li>
                            <li class="hero-video__item">内部零件制造和装配</li>
                            <li class="hero-video__item">总承包项目管理</li>
                        </ul>
                        -->

                    </div>
                    <!--
                    <a href="/zh-hans/get-a-quote/" class="btn hero-video__cta-btn">获取报价</a>
                    <a href="https://outlook.office365.com/book/Komaspec@komacut.com/" target="_blank"
                        class="btn hero-video__cta-btn">预约电话</a>
                    <a href="#" class="hero-video__play-btn btn btn--secondary btn--with-icon"
                        data-micromodal-trigger="video-modal"
                        data-video-btn="https://static.komaspec.com/media/a2baw2rd/komaspec-corporate-video-1.mp4">
                        <i class="icon icon--white icon-video"></i>
                        观看视频
                    </a>
                    -->
                </div>

            </div>
        </div>
    </div>
</template>


<style lang="less">

.videobg{

    img{

        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        // left: 66%;
        transform: translate(-50%, -50%);
        // min-width: 100%;
        min-height: 100%;

    }

}
 
 @media screen and (min-width:1288px) {
    .videobg{
        img{

            left: 64%;

        }
    }
 }
 @media screen and (min-width:1600px) {
    .videobg{
        img{

            left: 72%;

        }
    }

    .hero-video:before {
        
        background: linear-gradient(90deg, #000 44%, transparent);
    }
 }
</style>